import { datalistAll } from '../assets/json/data.js'
export function gdmapOther (map, datalist, mapType, iconType) {
  // window.addEventListener('hashchange', (event) => { //console.log(event) })
  // let map = this.$root.MapGd
  // 窗体
  function createInfoWindow (data) {
    let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem;position: relative'>
          <img src="${process.env.BASE_URL}img/map/green_close.png" onclick="window.gmap.clearInfoWindow()"
           style="cursor: pointer;height: 2rem;width:2rem;position: absolute;right: .5rem;top: .5rem" />  
          <p class="font_s22" style="color:#5AD834">| ${data.orgName}</p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">公墓地址：${data.orgAddr} </span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">开办时间：${data.orgOpenDate}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/04.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">负 责 人 ：${data.principal}</span>
          </p>
          <p v-if="data.unicode != null">
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">社会信用代码号：<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;${data.unicode}</span>
          </p>
          <ul class="flex colorF textC" style="padding:0.5rem 0">
            <li class="flex1" style="border: solid 2px #EF8264;border-radius:3px;background:rgba(239,130,100,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.xydj}</p>
              <p class="font_s16">信用等级</p>
            </li>
            <li class="flex1" style="border: solid 2px #7D649E;border-radius:3px;background:rgba(125,100,158,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.xyfs}</p>
              <p class="font_s16">信用分</p>
            </li>
            <li class="flex1" style="border: solid 2px #94E7B7;border-radius:3px;background:rgba(148,231,183,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;" >${data.fxdj}</p>
              <p class="font_s16">风险等级</p>
            </li>
            <li class="flex1" style="border: solid 2px #FFCD79;border-radius:3px;background:rgba(255,205,121,0.5);">
              <p class="font_s20" style="line-height: 2rem;">${data.orgLevel}</p>
              <p class="font_s16">机构等级</p>
            </li>
          </ul>
          <p class="font_s18 flex" style="color: #5AD834;">
          <span onclick="window.vm.opencs(1, ${data.orgId})" style="display: none">发起监管</span>
          <span onclick="window.vm.opencs(2, ${data.orgId})" style="margin: 0 1rem;">详细信息</span>
          <span onclick="window.vm.opencs(5, ${data.orgId})">待售墓穴信息</span></p>
        </div>`
    var info = document.createElement('div')
    info.className = 'custom-info input-card content-window-card'

    var middle = document.createElement('div')
    middle.className = 'info-middle'
    middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
    middle.innerHTML = content
    info.appendChild(middle)
    return info
  }
  // 窗体 全部
  function createInfoWindowOther (data) {
    let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem;position: relative'>
          <img src="${process.env.BASE_URL}img/map/green_close.png" onclick="window.gmap.clearInfoWindow()"
           style="cursor: pointer;height: 2rem;width: 2rem;position: absolute;right: .5rem;top: .5rem"/>  
          <p class="font_s22" style="color:#5AD834">| ${data.orgName}</p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">公墓地址：${data.orgAddr} </span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">开办时间：${data.orgOpenDate}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/04.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">负 责 人 ：${data.principal}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">社会信用代码号：<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;${data.unicode}</span>
          </p>
          <ul class="flex colorF textC" style="padding:0.5rem 0">
            <li class="flex1" style="border: solid 2px #EF8264;border-radius:3px;background:rgba(239,130,100,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.xydj}</p>
              <p class="font_s16">信用等级</p>
            </li>
            <li class="flex1" style="border: solid 2px #7D649E;border-radius:3px;background:rgba(125,100,158,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.xyfs}</p>
              <p class="font_s16">信用分</p>
            </li>
            <li class="flex1" style="border: solid 2px #94E7B7;border-radius:3px;background:rgba(148,231,183,0.5);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.fxdj}</p>
              <p class="font_s16">风险等级</p>
            </li>
            <li class="flex1" style="border: solid 2px #FFCD79;border-radius:3px;background:rgba(255,205,121,0.5);">
              <p class="font_s20" style="line-height: 2rem;">${data.orgLevel}</p>
              <p class="font_s16">机构等级</p>
            </li>
          </ul>
          <p class="font_s18 flex" style="color: #5AD834;">
          <span onclick="window.vm.opencs(1,${data.orgId})" style="display: none">发起监管</span>
          <span onclick="window.vm.opencs(2, ${data.orgId})" style="margin: 0 1rem">详细信息</span>
          <span onclick="window.vm.opencs(5, ${data.orgId})">待售墓穴信息</span></p>
        </div>`
    var info = document.createElement('div')
    info.className = 'custom-info input-card content-window-card'

    var middle = document.createElement('div')
    middle.className = 'info-middle'
    middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
    middle.innerHTML = content
    info.appendChild(middle)
    return info
  }
  // 埋葬点窗体
  function createInfoWindowOther2 (data) {
    let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem;position: relative'>
          <img src="${process.env.BASE_URL}img/map/green_close.png" onclick="window.gmap.clearInfoWindow()"
           style="cursor: pointer;height: 2rem;width:2rem;position: absolute;right: .5rem;top: .5rem" />  
          <p class="font_s22" style="color:#5AD834">| ${data.villageName}</p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">村落地址：${data.burialAddr} </span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">村落所属街镇：${data.streetName}</span>
          </p>
          <ul class="flex colorF textC" style="padding:0.5rem 0">
            <li class="flex1" style="border: solid 2px #EF8264;border-radius:3px;background:rgba(239,130,100,0.7);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.burialArea}<span style="font-size: 14px">亩</span></p>
              <p class="font_s16">总面积</p>
            </li>
            <li class="flex1" style="border: solid 2px #7D649E;border-radius:3px;background:rgba(125,100,158,0.7);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.tombsTotalX}<span style="font-size: 14px">穴</span></p>
              <p class="font_s16">墓穴总数</p>
            </li>
            <li class="flex1" style="border: solid 2px #94E7B7;border-radius:3px;background:rgba(148,231,183,0.7);margin-right:0.5rem;">
              <p class="font_s20" style="line-height: 2rem;">${data.tombsUsedX}<span style="font-size: 14px">穴</span></p>
              <p class="font_s16">已使用</p>
            </li>
            <li class="flex1" style="border: solid 2px #FFCD79;border-radius:3px;background:rgba(255,205,121,0.7);">
              <p class="font_s20" style="line-height: 2rem;">${data.tombsUnusedX}<span style="font-size: 14px">穴</span></p>
              <p class="font_s16">未使用</p>
            </li>
          </ul>
          <p class="font_s18 flex " style="color: #5AD834;"><span onclick="window.vm.opencs(4, ${data.burialSiteId})">详细信息</span></p>
        </div>`
    var info = document.createElement('div')
    info.className = 'custom-info input-card content-window-card'

    var middle = document.createElement('div')
    middle.className = 'info-middle'
    middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
    middle.innerHTML = content
    info.appendChild(middle)
    return info
  }
  // 预警
  function createInfoWindowOther3 (data) {
    let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem;position: relative'>
          <img src="${process.env.BASE_URL}img/map/green_close.png" onclick="window.gmap.clearInfoWindow()"
           style="cursor: pointer;height: 2rem;width:2rem;position: absolute;right: .5rem;top: .5rem" />  
          <p class="font_s22" style="color:#5AD834">| ${data.orgName}</p>
           <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">公墓地址：${data.orgAddr} </span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">开办时间：${data.orgOpenDate}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/04.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">负 责 人 ：${data.principal}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF" v-if="data.unicode != null">社会信用代码号：<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;${data.unicode}</span>
          </p>
          <p class="font_s18 flex " style="color: #5AD834;"><span onclick="window.vm.opencs(8, ${data.expectWarnId}, ${data.warnType})">详细信息</span></p>
        </div>`
    var info = document.createElement('div')
    info.className = 'custom-info input-card content-window-card'

    var middle = document.createElement('div')
    middle.className = 'info-middle'
    middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
    middle.innerHTML = content
    info.appendChild(middle)
    return info
  }

  if (map) {
    window.gmap.clearMap()
    /*eslint-disable no-undef*/
    new AMap.DistrictSearch({
      extensions: 'all', // 返回完整行政区边界点
      subdistrict: 0 // 显示下级行政区级数，0为不返回下级行政区
    }).search('浦东新区', function (status, result) { // search：根据关键词查询行政区信息，当status为complete时，result为DistrictSearchResult
      var outer = [ // 外多边形坐标数组
        new AMap.LngLat(-360, 90, true),
        new AMap.LngLat(-360, -90, true),
        new AMap.LngLat(360, -90, true),
        new AMap.LngLat(360, 90, true)
      ]
      var inside = result.districtList[0].boundaries // 查询到的行政区的边界点数组
      var pathArray = [ outer ]
      pathArray.push.apply(pathArray, inside)

      var polygon = new AMap.Polygon({ // 创建一个多边形覆盖物
        strokeColor: '#00aaad', // 线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeWeight: 2,
        strokeOpacity: 0.6, // 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeStyle: 'solid', // 轮廓线样式，实线:solid，虚线:dashed
        fillColor: '#0a1d4c', // 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
        fillOpacity: 0.5, // 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        zindex: 1
      })
      polygon.setPath(pathArray)
      window.gmap.add(polygon)
    })
    /*eslint-disable no-undef*/
    AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
      //创建一个实例
      var districtExplorer = new DistrictExplorer({
        map: window.gmap
      });
      function renderAreaNode(areaNode) {
        //绘制子区域
        districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
          if(i==10){
            return {
              cursor: 'default',
              bubble: true,
              strokeColor: '#029ac6', //线颜色
              strokeOpacity: 0.7, //线透明度
              strokeWeight: 2, //线宽
              fillColor: '#05133c', //填充色
              fillOpacity: 0.75 //填充透明度
            }
          }
        })
      }
      var adcodes = [310000]
      districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons();
        for (var i = 0, len = areaNodes.length; i < len; i++) {
          renderAreaNode(areaNodes[i])
        }
        //更新地图视野
         //maps[idmap].setFitView(districtExplorer.getAllFeaturePolygons());
      })
    })
    // 加颜色
    window.gmap.setZoomAndCenter(9.5, [121.708106,31.01865])
  }
  // 创建点
  for (const elem of datalist) {
    let arr = []
    arr.push(elem.jd)
    arr.push(elem.wd)
    elem.lnglat = arr
  }
  let infoWindow = new AMap.InfoWindow({ isCustom: true, offset: new AMap.Pixel(0, -30) })
  for (let i = 0, marker; i < datalist.length; i++) {
    var url = null
    if (iconType === 'A') {
      url = `${process.env.BASE_URL}img/map/01.png`
    } else if (iconType === 'B') {
      url = `${process.env.BASE_URL}img/map/05.png`
    } else if (iconType === 'C') {
      url = `${process.env.BASE_URL}img/map/redMap.png`
    } else if (iconType === 8) {
      url = `${process.env.BASE_URL}img/map/bg_dingwei.png`
    } else if (iconType === 12) {
      url = `${process.env.BASE_URL}img/map/03.png`
    } else {
      url = `${process.env.BASE_URL}img/map/01.png`
    }
    marker = new AMap.Marker({
      position: datalist[i].lnglat,
      icon: url,
      map: map
    })
    if (mapType === 1) {
      marker.content = createInfoWindow(datalist[i])
    } else if (mapType === 2) {
      marker.content = createInfoWindowOther(datalist[i])
    } else if (mapType === 3) {
      marker.content = createInfoWindowOther2(datalist[i])
    } else if (mapType === 8) {
      marker.content = createInfoWindowOther3(datalist[i])
    }
    marker.on('click', markerClick)
    marker.emit('click', { target: marker })
  }
  function markerClick (e) {
    infoWindow.setContent(e.target.content)
    if (e.pixel) { // 初始不打开弹窗
      infoWindow.open(map, e.target.getPosition())
    }
  }
  //map.setFitView()
}
export function mapFun (map) {
  map.clearMap()
  function createInfoWindow (data) {
    let content = `<div style='color: aqua;width: 23.875rem;border: solid 2px #A0F487;border-radius: 5px;padding:1rem'>
          <p class="font_s22" style="color:#5AD834">| ${data.mc}</p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/02.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">公墓地址：${data.dz} </span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/03.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">开办时间：${data.ksrq}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/04.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">负 责 人 ：${data.fzr}</span>
          </p>
          <p>
            <img class="verticM" style="height:1.125rem;margin-left:1rem;" src="${process.env.BASE_URL}img/05.png" alt="">&nbsp;&nbsp;
            <span class="Regular font_s18 colorF">社会信用代码号：<br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;91310115676253729p</span>
          </p>
        </div>`
    // <p class="font_s18" style="color: #5AD834;padding-left: 3rem;"><span>公墓生命周期图</span></p>
    var info = document.createElement('div')
    info.className = 'custom-info input-card content-window-card'

    var middle = document.createElement('div')
    middle.className = 'info-middle'
    middle.style.backgroundColor = 'rgba(0,0,0,0.5)'
    middle.innerHTML = content
    info.appendChild(middle)
    return info
  }
  // 创建点
  // //console.log(datalist)
  for (const elem of datalistAll.values()) {
    let arr = []
    arr.push(elem.jd)
    arr.push(elem.wd)
    elem.lnglat = arr
  }
  let infoWindow = new AMap.InfoWindow({
    isCustom: true,
    offset: new AMap.Pixel(0, -30)
  })
  for (let i = 0, marker; i < datalistAll.length; i++) {
    marker = new AMap.Marker({
      position: datalistAll[i].lnglat,
      icon: `${process.env.BASE_URL}img/08.png`,
      map: map
    })
    marker.content = createInfoWindow(datalistAll[i])
    marker.on('click', markerClick)
    marker.emit('click', { target: marker })
  }
  function markerClick (e) {
    infoWindow.setContent(e.target.content)
    if (e.pixel) {
      // 初始不打开弹窗
      infoWindow.open(map, e.target.getPosition())
    }
  }
}
